<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/fonts.css">
    <title>小米商城</title>
</head>

<body>
    <!-- 顶部栏 -->
    <div class="topBar">
        <div class="container">
            <!-- 顶部栏由三块组成，列表，购物车以及登录 -->
            <!-- 顶部栏的列表区 -->
            <div class="topBar-list">
                <!-- 每个列表可以分为两部分，一个a标签代表链接以及span标签“|”分隔开 -->
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">loT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">金融</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">政企服务</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
            </div>
            <!-- 顶部栏的购物车区 -->
            <div class="shop">
                <a href="#">
                    <i class="iconfont" style="font-size: 14px;">&#xe61b;</i>
                    购物车（0）</a>
            </div>
            <!-- 顶部栏的登录区 -->
            <div class="login">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">消息通知</a>
                <span>|</span>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="header">
        <div class="container">
            <!-- 导航栏由三块组成，图标，列表，以及搜索框 -->
            <!-- 导航栏的图标区 -->
            <div class="site-logo">
                <a href="#">
                    <img src="img/logo.png" alt="">
                </a>
            </div>
            <!-- 导航栏的列表区 -->
            <div class="site-list">
                <ul class="clearfix">
                    <li class="site-category"><a href="#"><img src="./img/mifen.gif" alt=""></a>
                        <!-- 侧边栏 -->
                        <div class="category-list">
                            <ul>
                                <li><a href="#">手机 电话卡
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">电视 盒子
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">笔记本 显示器 平板
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">家电 插线板
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">出现 穿戴
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">智能 路由器
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">电源 配件
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">健康 儿童
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">耳机 音箱
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">生活 箱包
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <!-- 导航栏的搜索框 -->
            <div class="site-search">
                <form action="">
                    <input type="text" name="search" class="search-text" placeholder="耳机">
                    <input type="submit" class="search-btn iconfont" value="&#xe60b;" style="font-size: 24px;">
                    
                </form>
            </div>
        </div>
    </div>
    <!-- 主页内容区 -->
    <div class="site-content">
        <div class="container">
            <!-- 轮播图 -->
            <div class="site-slider">
                <a href="#">
                    <img src="./img/phone.jpg" alt="">
                </a>
                <span class="next"></span>
                <span class="prev"></span>
                <div class="slider-item">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <!-- 向导 -->
            <div class="content-sub">
                <!-- 向导左 -->
                <div class="content-channel">
                    <ul class="channel-list clearfix">
                        <li><a href="#">
                                <i class="iconfont">&#xe641;</i>
                                选购手机
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe790;</i>
                                企业团购
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe603;</i>
                                F码通道
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe602;</i>
                                米粉卡
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe60f;</i>
                                以旧换新
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe601;</i> </i>
                                话费充值
                            </a></li>
                    </ul>
                </div>
                <!-- 向导右 -->
                <div class="content-list">
                    <ul class="clearfix">
                        <li><a href=""><img src="img/image1.jpg"></a></li>
                        <li><a href=""><img src="img/image2.jpg"></a></li>
                        <li><a href=""><img src="img/image3.jpg"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- banner图 -->
     <div class="content-banner">
            <div class="container"> 
                <a href="#">
                    <img src="./img/banner.jpg">
                </a>
			</div> 
     </div>
    </div>
    <!-- 内容详情 -->
    <div class="content-desc">
        <div class="container">
            <!-- 上层标题 -->
            <div class="box-hd">
                <h2>手机</h2>
                <div class="more">
                    <a href="#">查看全部
                        <i class="iconfont">&#xe605;</i>
                    </a>
                </div>
            </div>
            <!-- 下层内容 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <!-- 内容左边大图 -->
                    <div class="row-l">
                        <a href="#">
                            <img src="./img/iphone.jpg">
                        </a>
                    </div>
                    <!-- 内容右边小图分为两大部分，图片，商品描述 -->
                    <div class="row-r">
                        <ul>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure1.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 青春版 5G
                                    </a>
                                </h3>
                                <p class="desc">
                                    50倍潜望式变焦/轻薄5G手机
                                </p>
                                <p class="price">
                                    <span class="num">1899</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure2.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        小米10
                                    </a>
                                </h3>
                                <p class="desc">
                                    骁龙865/1亿像素相机
                                </p>
                                <p class="price">
                                    <span class="num">3799</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure3.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30 Pro
                                    </a>
                                </h3>
                                <p class="desc">
                                    双模5G、 骁龙865、 弹出全面屏
                                </p>
                                <p class="price">
                                    <span class="num">2499</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure4.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30 Pro 变焦版
                                    </a>
                                </h3>
                                <p class="desc">
                                    双模5G、 骁龙865、 弹出全面屏
                                </p>
                                <p class="price">
                                    <span class="num">3799</span>元
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure5.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        小米10 Pro
                                    </a>
                                </h3>
                                <p class="desc">
                                    骁龙865/50倍变焦
                                </p>
                                <p class="price">
                                    <span class="num">4999</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure6.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30
                                    </a>
                                </h3>
                                <p class="desc">
                                    120 Hz流速屏、 全速热爱
                                </p>
                                <p class="price">
                                    <span class="num">1399</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure7.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K30 5G
                                    </a>
                                </h3>
                                <p class="desc">
                                    双模5G、 120Hz流速屏
                                </p>
                                <p class="price">
                                    <span class="num">1899</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure8.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi 8
                                    </a>
                                </h3>
                                <p class="desc">
                                    5000mAh超长续航
                                </p>
                                <p class="price">
                                    <span class="num">799</span>元
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>




        </div>
    </div>
    <!-- 脚部 -->
    <div class="footer">
        <div class="container">
            <!-- 脚部一共分为两部分，上部分的服务以及其他小字 -->
            <div class="footer-service">
                <ul class="clearfix">
                    <li class="first">
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe600;</i>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe638;</i>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe790;</i>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe768;</i>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links clearfix">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd>售后政策</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
                <div class="col-contact">
                    <p class="phone">400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#">
                        <i class="iconfont">&#xe641;</i>
                        人工客服
                    </a>
                </div>
            </div>

        </div>
    </div>
</body>

</html>